import React, { Component, Fragment } from 'react'

import { Card, Table, Button, Tag, Modal, message, Typography } from 'antd'

import {
  getArticleList,
  /* getArticleListBeTest, */
  deleteArticleById
} from '../../requests'

import moment from 'moment'
// import { get } from 'http'

const ButtonGroup = Button.Group
const { Text } = Typography

export default class Article extends Component {
  constructor() {
    super()
    this.state = {
      dataSource: [],
      isLoading: true,
      editModalVisible: false,
      confirmLoading: false,
      clickArticleId: null,
      clickArticleTitle: null
    }
    this.columns = [
      {
        title: '标题',
        dataIndex: 'title',
        key: 'title'
      },
      {
        title: '作者',
        dataIndex: 'author',
        key: 'author'
      },
      {
        title: '阅读量',
        render(text, recode, index) {
          return (
            <Tag color={recode.amount > 150 ? '#f50' : 'green'}>
              {recode.amount}
            </Tag>
          )
        },
        key: 'amount'
      },
      {
        title: '创建时间',
        render(text, recode, index) {
          return moment().format('YYYY年MM月DD日 hh:mm:ss')
        },
        key: 'createAt'
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record, index) => {
          return (
            <ButtonGroup>
              <Button size="small" onClick={this.onEdit.bind(this, record)}>
                编辑
              </Button>
              <Button
                size="small"
                onClick={this.handleArticleDelete.bind(this, record)}
              >
                删除
              </Button>
            </ButtonGroup>
          )
        }
      }
    ]
  }

  onEdit(record) {
    const { id, title } = record
    this.props.history.push(`/admin/article/edit/${id}`, { title })
  }

  handleArticleDelete(record) {
    this.setState({
      editModalVisible: true,
      clickArticleId: record.id,
      clickArticleTitle: record.title
    })
  }
  /* onPageChange = currentPage => {
    this.setState(
      {
        offset: (currentPage - 1) * this.state.perpage
      },
      () => {
        this.getData()
      }
    )
  }
  onPageShowSizeChange = (current, perpage) => {
    this.setState(
      {
        offset: 0,
        perpage
      },
      () => {
        this.getData()
      }
    )
  }
  getData = () => {
    const { offset, perpage } = this.state
    getArticleListBeTest({ offset, perpage }).then(resp => {
      if (resp.data.code === 200) {
        this.setState({
          isLoading: false,
          dataSource: resp.data.data.list,
          total: resp.data.data.total
        })
      } else {
        //处理错误
      }
    })
  } */

  handleDeleteButtonClick = () => {
    this.setState(
      {
        confirmLoading: true
      },
      () => {
        deleteArticleById(this.clickArticleId)
          .then(res => {
            if (res.data.code === 200) {
              this.handleCancelDelete()
              message.success(res.data.data.errorMsg)
              this.setState({
                isLoading: true
              })
              this.getListData()
            } else {
              //处理错误
            }
          })
          .catch(err => console.log(err))
      }
    )
  }

  handleCancelDelete = () => {
    this.setState({
      editModalVisible: false,
      confirmLoading: false
    })
  }

  getListData = () => {
    getArticleList()
      .then(resp => {
        if (resp.data.code === 200) {
          this.setState({
            isLoading: false,
            dataSource: resp.data.data
          })
        } else {
          //处理错误
        }
      })
      .catch()
  }

  componentDidMount() {
    // this.getData()
    this.getListData()
  }

  render() {
    return (
      <Fragment>
        <Card title="文章列表" bordered={false} style={{ margin: '16px' }}>
          <Table
            columns={this.columns}
            dataSource={this.state.dataSource}
            loading={this.state.isLoading}
            rowKey={record => record.id}
            pagination={{
              /* current: this.state.offset / this.state.perpage + 1,
            total: this.state.total, */
              pageSize: 10,
              hideOnSinglePage: true,
              showSizeChanger: true,
              pageSizeOptions: ['5', '10', '20'],
              showQuickJumper: true
              /* onChange: this.onPageChange,
            onShowSizeChange: this.onPageShowSizeChange */
            }}
          />
        </Card>
        <Modal
          title="确认删除"
          okText="确认"
          cancel="取消"
          visible={this.state.editModalVisible}
          onOk={this.handleDeleteButtonClick}
          onCancel={this.handleCancelDelete}
          confirmLoading={this.state.confirmLoading}
        >
          确定删除
          <Text type="danger" strong>
            {this.state.clickArticleTitle}
          </Text>
          吗
        </Modal>
      </Fragment>
    )
  }
}
